import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Menu, Spin, Modal } from 'antd';
import React from 'react';
import { history, connect } from 'umi';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';

class AvatarDropdown extends React.Component {
  state = {
     visible: false,
   };

  onMenuClick = event => {
    const { key } = event;

    if (key === 'logout') {
      const { dispatch } = this.props;

      if (dispatch) {
        dispatch({
          type: 'login/logout',
        });
      }

      return;
    }
    // history.push(`/account/${key}`);
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  render() {
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
    } = this.props;

    let perinfo;
    perinfo=JSON.parse(sessionStorage.getItem('personinfo'))
    console.log(perinfo)
    if(perinfo){
      if ( perinfo.type==1) {
        perinfo.type='高级教师'
      }else if ( perinfo.type==2) {
        perinfo.type='普通教师'
      }else if ( perinfo.type==3) {
        perinfo.type='学生'
      }else{
        perinfo.type='超管'
      }
    
    }else{
      perinfo={username:"",name:"",type:"",student_number:''}
    }

    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && (
          <Menu.Item key="center">
            <Modal
              title="如信息有误请联系管理员"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            >
              <p>账号：{perinfo.username? perinfo.username : '' }</p>
              <p>姓名： {perinfo.name? perinfo.name : '' }</p>
              <p>类型：{perinfo.type }</p>
              <p>工号：{perinfo.student_number }</p>
            </Modal>
            <UserOutlined />
            <span onClick={this.showModal}> 个人中心</span>
           
          </Menu.Item>
        )}
        {/* {menu && (
          <Menu.Item key="settings">
            <SettingOutlined />
            个人设置
          </Menu.Item>
        )} */}
        {menu && <Menu.Divider />}

        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );
    // return currentUser && currentUser.name ? (
    //   <HeaderDropdown overlay={menuHeaderDropdown}>
    //     <span className={`${styles.action} ${styles.account}`}>
    //       <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
    //       <span className={styles.name}>{`欢迎您，老师`}</span>
    //     </span>
    //   </HeaderDropdown>
    // ) : (
    //     <span className={`${styles.action} ${styles.account}`}>
    //       <Spin
    //         size="small"
    //         style={{
    //           marginLeft: 8,
    //           marginRight: 8,
    //         }}
    //       />
    //     </span>
    //   );
      return (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
          <span className={styles.name}>{`欢迎您，老师`}</span>
        </span>
      </HeaderDropdown>
    ) 
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
